<template>
    <div>
<!--        <i class="element-icons el-iconhometest"></i>-->
<!--        <v-form-designer></v-form-designer>-->
        <div class="ti-tishi">
            <div class="ti-first">
                <div class="img-right">
                    <i class="element-icons el-icon202yonghu_yonghu3" style="font-size: 80px;"></i>
                </div>
                <div class="message">
                    <div class="title">
                        新访客
                    </div>
                    <div class="count">
                        <span>{{fangke}}</span>
                    </div>
                </div>
            </div>
            <div class="ti-second">
                <div class="img-right">
                    <i class="element-icons el-iconliaotianjilu" style="font-size: 80px;"></i>
                </div>
                <div class="message">
                    <div class="title">
                        新投诉
                    </div>
                    <div class="count">
                        <span>{{toushu}}</span>
                    </div>
                </div>
            </div>
            <div class="ti-third">
                <div class="img-right">
                    <i class="element-icons el-iconrenminbi" style="font-size: 80px;"></i>
                </div>
                <div class="message">
                    <div class="title">
                        周流量
                    </div>
                    <div class="count">
                        <span>{{liulian}}</span>
                    </div>
                </div>
            </div>
            <div class="ti-four">
                <div class="img-right">
                    <i class="element-icons el-iconjinggao" style="font-size: 80px;"></i>
                </div>
                <div class="message">
                    <div class="title">
                        新警告
                    </div>
                    <div class="count">
                        <span>{{chulishu}}</span>
                    </div>
                </div>
            </div>
        </div>



        <div class="ti-xiang"></div>


        <div class="ti-bing">
            <div class="bing-first"></div>
            <div class="bing-second"></div>
            <div class="bing-third"></div>
        </div>


        <div class="ti-biaoqiang">
            <div class="biaoqiang-first">
                <el-table border
                        :data="tableData"
                        style="width: 100%;background-color: #eaeaea" size="medium">
                    <el-table-column
                            prop="id"
                            label="编号"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="route"
                            label="路线"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="dayNum"
                            label="日人流量">
                    </el-table-column>
                </el-table>
            </div>
            <div class="biaoqiang-second">
                <el-table
                        ref="multipleTable"
                        :data="tableData1"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange" size="medium">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            label="日期"
                            width="120">
                        <template slot-scope="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址"
                            show-overflow-tooltip>
                    </el-table-column>
                </el-table>
            </div>
            <div class="biaoqiang-third">
                <div class="third-img">
                    <img src="../assets/img/shouyeCard.png" width="100%"/>
                </div>
                <span>标题</span>
                <div class="tubiao">
                    123
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import * as echarts from 'echarts'
    export default {
        name: "homeTest",
        data(){
            return{
                tableData: [],
                countMessage:1002,
                lineName:[],
                lineSeries:[],
                lineOption : {
                    title: {
                        text: '各区上周-日收入图'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    // 图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
                    legend: {
                        // data: ['邮箱', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
                        data: []
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: []
                    // series: [
                    //     //更改这里面的数据即可
                    //     {
                    //         name: '邮箱',
                    //         type: 'line',
                    //         stack: 'Total',
                    //         areaStyle: {},
                    //         emphasis: {
                    //             focus: 'series'
                    //         },
                    //         data: [120, 132, 101, 134, 90, 230, 210]
                    //     },
                    //     {
                    //         name: 'Union Ads',
                    //         type: 'line',
                    //         stack: 'Total',
                    //         areaStyle: {},
                    //         emphasis: {
                    //             focus: 'series'
                    //         },
                    //         data: [220, 182, 191, 234, 290, 330, 310]
                    //     },
                    //     {
                    //         name: 'Video Ads',
                    //         type: 'line',
                    //         stack: 'Total',
                    //         areaStyle: {},
                    //         emphasis: {
                    //             focus: 'series'
                    //         },
                    //         data: [150, 232, 201, 154, 190, 330, 1410]
                    //     },
                    //     {
                    //         name: 'Direct',
                    //         type: 'line',
                    //         stack: 'Total',
                    //         areaStyle: {},
                    //         emphasis: {
                    //             focus: 'series'
                    //         },
                    //         data: [320, 332, 301, 334, 390, 330, 320]
                    //     },
                    //     {
                    //         name: 'Search Engine',
                    //         type: 'line',
                    //         stack: 'Total',
                    //         label: {
                    //             show: true,
                    //             position: 'top'
                    //         },
                    //         areaStyle: {},
                    //         emphasis: {
                    //             focus: 'series'
                    //         },
                    //         data: [820, 932, 901, 934, 1290, 1330, 1320]
                    //     }
                    // ]
                },
                pieOption : {
                    title: {
                        text: '各区周收入比例'
                    },
                    tooltip: {
                        trigger: 'item',
                        // axisPointer: {
                        //     type: 'cross',
                        //     label: {
                        //         backgroundColor: '#6a7985'
                        //     }
                        // }
                    },
                    legend: {
                        top: 'bottom'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    series: [
                        {
                            name: 'Nightingale Chart',
                            type: 'pie',
                            radius: [20, 100],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8
                            },
                            data: []
                        }
                    ]
                },
                tableData1: [{
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
                multipleSelection: [],
                fangke:0,
                toushu:0,
                liulian:0,
                chulishu:0
            }
        },
        mounted(){
            this.getLine();
            this.xiang();
            this.bing();
            this.leida();
            this.shuzhuang();
            this.xieshu();
            this.getPie();
            this.getTop();
        },
        created(){
            this.$http({
                url:'/visitor/getOne',
                method:'get',
                params:{
                    url:'8082/'
                }
            }).then(result=>{
                console.log(result)
                if(result.data.person){
                    this.fangke=result.data.person
                }
            })
            this.$http({
                url:'/toushu/data',
                method:'get'
            }).then(result=>{
                console.log(result)
                if(result.data){
                    this.toushu=result.data
                }
            })
            this.$http({
                url:'/echart/liulian',
                method:'get'
            }).then(result=>{
                console.log(result);
                if(result.data){
                    this.liulian=result.data
                }
            })
            this.$http({
                url:'/bus/chulishu',
                method:'get'
            }).then(result=>{
                this.chulishu=result.data
            })
        },
        methods:{
            xiang(){

            },
            bing(){

            },
            leida(){
                let shu=[];
                this.$http({
                    url:'/echart/getLeida',
                    method:'get'
                }).then(result=>{
                    for (let i = 0; i < result.data.length; i++) {
                        let parr={
                            value: [],
                            name: ''
                        }
                        parr.value=(result.data[i].value);
                        parr.name=result.data[i].name
                        shu.push(parr)
                        var myChart = echarts.init(document.querySelector('.ti-bing .bing-first'));
                        let option = {
                            legend: {
                                data: ['白云区', '从化区','南沙区','增城区','天河区','海珠区','番禺区','越秀区','花都区','荔湾区','黄埔区']
                            },
                            radar: {
                                // shape: 'circle',
                                indicator: [
                                    //这里可以减少，减少一个6角变5角
                                    { name: '星期一', max: 1000 },
                                    { name: '星期二', max: 1000 },
                                    { name: '星期三', max: 1000 },
                                    { name: '星期四', max: 1000 },
                                    { name: '星期五', max: 1000 },
                                    { name: '星期六', max: 1000 },
                                    { name: '星期天', max: 1000 }
                                ]
                            },
                            series: [
                                {
                                    name: 'Budget vs spending',
                                    type: 'radar',
                                    data: shu
                                }
                            ]
                        };
                        myChart.setOption(option);
                    }
                    console.log(shu);
                    console.log(result);
                })

            },
            shuzhuang(){
                var myChart=echarts.init(document.querySelector('.ti-bing .bing-third'));
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: 'Direct',
                            type: 'bar',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [320, 332, 301, 334, 390, 330]
                        },
                        {
                            name: 'Email',
                            type: 'bar',
                            stack: 'Ad',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: 'Union Ads',
                            type: 'bar',
                            stack: 'Ad',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: 'Video Ads',
                            type: 'bar',
                            stack: 'Ad',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                            name: 'Search Engine',
                            type: 'bar',
                            data: [862, 1018, 964, 1026, 1679, 1600, 1570],
                            emphasis: {
                                focus: 'series'
                            },
                            //标记线，连接线
                            markLine: {
                                lineStyle: {
                                    type: 'dashed'
                                },
                                data: [[{ type: 'min' }, { type: 'max' }]]
                            }
                        },
                        {
                            name: 'Baidu',
                            type: 'bar',
                            barWidth: 5,
                            stack: 'Search Engine',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [620, 732, 701, 734, 1090, 1130, 1120]
                        },
                        {
                            name: 'Google',
                            type: 'bar',
                            stack: 'Search Engine',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [120, 132, 101, 134, 290, 230, 220]
                        },
                        {
                            name: 'Bing',
                            type: 'bar',
                            stack: 'Search Engine',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [60, 72, 71, 74, 190, 130, 110]
                        },
                        {
                            name: 'Others',
                            type: 'bar',
                            stack: 'Search Engine',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [62, 82, 91, 84, 109, 110, 120]
                        }
                    ]
                };
                myChart.setOption(option);
            },
            xieshu(){
                var myChart=echarts.init(document.querySelector('.ti-biaoqiang .biaoqiang-third .tubiao'));
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            // Use axis to trigger tooltip
                            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    series: [
                        {
                            name: 'Direct',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [320, 302, 301, 334, 390, 330, 320]
                        },
                        {
                            name: 'Mail Ad',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: 'Affiliate Ad',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: 'Video Ad',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [150, 212, 201, 154, 190, 330, 410]
                        },
                        {
                            name: 'Search Engine',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [820, 832, 901, 934, 1290, 1330, 1320]
                        }
                    ]
                };
                myChart.setOption(option)
            },
            getLine(){
                this.$http({
                    url:'/echart/test',
                    method:'get'
                }).then(result=>{
                    console.log(result);
                    if(result.status==200){
                        for(let i=0;i<result.data.length;i++){
                            console.log(result.data[i])
                            this.lineSeries.push(result.data[i])
                            this.lineName.push(result.data[i].data);
                            this.lineOption.legend.data.push(result.data[i].name);
                            this.lineOption.series.push(result.data[i]);
                        }
                        var myChart = echarts.init(document.querySelector('.ti-xiang'));
                        myChart.setOption(this.lineOption);

                        console.log(this.lineOption);
                        console.log(this.lineName[0]);
                    }
                })
            },
            getPie(){
                this.$http({
                    url:'/echart/pie',
                    method:'get'
                }).then(result=>{
                    console.log(result);
                    if(result.status==200){
                        for (let i = 0; i < result.data.length; i++) {
                            this.pieOption.series[0].data.push(result.data[i]);
                        }
                        var myChart = echarts.init(document.querySelector('.ti-bing .bing-second'));
                        myChart.setOption(this.pieOption);
                    }
                })
            },
            getTop(){
                this.$http({
                    url:'/echart/top',
                    method:'get'
                }).then(result=>{
                    console.log(result);
                    if(result.status==200){
                        this.tableData=result.data
                    }
                })
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            }
        }
    }
</script>

<style scoped>
.ti-tishi{
    width: 100%;
    height: 120px;
    display: flex;
    margin-bottom: 32px;
}
.ti-first{
    cursor: pointer;
    display: flex;
    width: 24%;
    margin-right: 2%;
    background-color:#eaeaea;
}
.ti-first:hover{
    box-shadow: 5px 5px 5px #B3C0D1;
}
.ti-second{
    cursor: pointer;
    display: flex;
    background-color: #eaeaea;
    width: 24%;
    margin-right: 2%;
    margin-left: 1%;
}
.ti-second:hover{
    box-shadow: 5px 5px 5px #B3C0D1;
}
.ti-third{
    cursor: pointer;
    display: flex;
    background-color: #eaeaea;
    width: 24%;
    margin-right: 2%;
    margin-left: 1%;
}
.ti-third:hover{
    box-shadow: 5px 5px 5px #B3C0D1;
}
.ti-four{
    cursor: pointer;
    display: flex;
    background-color: #eaeaea;
    width: 24%;
    margin-left: 1%;
}
.ti-four:hover{
    box-shadow: 5px 5px 5px #B3C0D1;
}
    .ti-xiang{
        width: 100%;
        height: 366px;
        background-color: #eaeaea;
        margin-bottom: 32px;
    }
    .ti-bing{
        display: flex;
        width: 100%;
        height: 348px;
        margin-bottom: 32px;
    }
    .bing-first{
        background-color: #eaeaea;
        width: 28%;
        margin-right: 4%;
    }
.bing-second{
    width: 28%;
    background-color: #eaeaea;
    margin-left: 4%;
    margin-right: 4%;
}
.bing-third{
    background-color: #eaeaea;
    width: 28%;
    margin-left: 4%;
}
    .ti-biaoqiang{
        width: 100%;
        height: 491px;
        display: flex;
    }
    .biaoqiang-first{
        width: 50%;
        height: 451px;
    }
    .biaoqiang-second{
        background-color: #eaeaea;
        width: 22%;
        margin-left: 2%;
        height: 400px;
    }
.biaoqiang-third{
    background-color: #eaeaea;
    width: 24%;
    margin-left: 2%;
    height: 451px;
}
    .third-img{
        width: 100%;
    }
    .tubiao{
        margin-top: 10px;
        width: 100%;
        height: 50%;
    }
    .img-right{
        width: 30%;
        margin-top: 20px;
        margin-left: 20px;
        height: 60%;
    }
    .message{
        height: 100%;
        width: 50%;
    }
    .title{
        margin-top: 20%;
        margin-left: 55%;
        font-size: 20px;
    }
    .count{
        margin-left: 55%;
        font-size: 22px;
        margin-top: 6%;
    }
</style>
